<template>
    <BaseHeader />
    <div class="container">
        <el-table class="my-custom-table" :data="tableData" style="width: 100%;height: 70vh;">
            <el-table-column prop="storageLocation" label="存放位置" />
            <el-table-column prop="inventoryNum" label="库存数量"/>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <div>
                        <el-button type="primary" @click="outPack(row)">出库</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

    </div>
    <div class="btns">
        <el-button type="primary" @click="backTop">返回首页</el-button>
        <el-button type="primary" @click="backOne">返回</el-button>
    </div>
    <ConfrimPack :isShow="showConfirm" :rows="borrows" @close="showConfirm = false" @confirm="showMulityBox" />
    <div v-if="isShowMulity" class="mulity">
        <MultityBox :infos="info" />
        <div class="qing-info">
            <div class="title">正在打开</div>
            <div class="detail">书名：{{bookName}}</div>
            <div class="detail">出版日期：{{ route.params.publishTime }}</div>
            <div class="detail">密级：{{ mijis }}</div>
            <!-- <div class="detail">存放位置：{{ info }}</div> -->
            <div class="detail">库存数量：{{ borrows.inventoryNum }}</div>
            <div class="detail">请领数量：{{ info.borrowNum }}</div>
            <div class="detail" style="display: flex;">请领条码：
                <div style="width: 10vw;height: 6vw;overflow-y: auto; 
                            padding: 2px;  
                            box-sizing: border-box; 
                            word-wrap: break-word;" >
                     <span v-for="(item,index) in codeList" :key="index"
                     >{{ item }},</span>
                </div>
               
                
            </div>
            <div class="footer">
                <el-button @click="boxOpened">请领完成</el-button>
            </div>
        </div>
    </div>
    <ConfirmCode :receiveId="receiveId" :isShow="showCodeScan" :infos="info" @close="showCodeScan = false" @confirm-close="handelClose"/>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import BaseHeader from '../../../BaseHeader.vue';
import { useRoute, useRouter } from 'vue-router';
import { addApply, getApplyPosition } from '../../../../../api/index'
import ConfrimPack from './ConfrimPack.vue';
import MultityBox from '../ruku/MultityBox.vue';
import ConfirmCode from './ConfirmCode.vue';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
let loading = ref(false);
let tableData = ref([]);
let showConfirm = ref(false);
const bookId = ref<any>(0);
const borrows = ref<any>();
const bookName = ref<any>('');
const info = ref<any>();
let isShowMulity = ref(false);
let showCodeScan = ref(false);
let mijis = computed(()=>{
    let miji = route.params.miji;
    if(miji === '10') {
        return '内部'
    } else if(miji === '20') {
        return '秘密'
    } else if(miji === '30') {
        return '绝密'
    } else if(miji === '40'){
         return '机密'
    }
})

const receiveId = ref()
const codeList=ref([])
const showMulityBox = (row: any) => {
    info.value = row;
    showConfirm.value = false;
    isShowMulity.value = true;
    const parama = {
    bookId: route.params.id,
    receiveNum: row.borrowNum,
    drawerId: row.drawId,
    receiveUser: row.receiveUser,
    receiveDay: row.receiveDay,
    // documentUrl: props.infos.documentUrl
  }
    addApply(parama).then((res: any) => {
    if (res.code == 200) {
        receiveId.value=res.data.receiveId
        codeList.value=res.data.barCodes
    } else {
      ElMessage.error(res.msg);
    }
  })
}
const boxOpened = () => {
    isShowMulity.value = false;
    showCodeScan.value = true;
}
const backTop = () => {
    router.push('/')
}
const backOne = () => {
    router.go(-1)
}

onMounted(() => {
    bookId.value = route.params.id;
    remoteMethod();
})

const remoteMethod = () => {
    if (bookId.value !== 0) {
        loading.value = true;
        const params = {
            bookId: bookId.value,
            size: 1000,
            curren: 1
        }
        getApplyPosition(params).then(res => {
            tableData.value = res.data.records || [];
            loading.value = false;
        })
    } else {
        tableData.value = [];
    }
}

const outPack = (row: any) => {
    row.name = route.params.name;
    bookName.value = route.params.name;
    borrows.value = row;
    showConfirm.value = true;
}

const emit = defineEmits(['confirmBox', 'closeBox'])

const handelClose = () =>{
    showCodeScan.value = false;
    remoteMethod();
}

</script>

<style lang="less" scoped>
.container {
    box-sizing: border-box;
    padding: 1vh 1vw;
}

.btns {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 10vh;
    justify-content: center;
    align-items: center;
}

.mulity {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;

    .qing-info {
        position: absolute;
        right: 10vh;
        width: 20vw;
        height: 40vh;
        top: 20vh;
        background-color: rgb(18, 48, 98);
        border-radius: 10px;
        border: 1px solid #fff;
        padding: 1vw;
        color: #fff;
        font-size: 12px;

        .title {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .footer {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            bottom: 1vw;
            left: 0;
        }

        .detail {
            margin-bottom: 1vh;
        }
    }
}
</style>